<template>
    <div>
        <el-button type="primary" @click="addEmpShow">添加员工</el-button>
        <el-table :data="emps" style="width: 100%" align="center" header-align="center">
            <el-table-column label="员工编号" prop="empno" />
            <el-table-column label="员工姓名" prop="ename" />
            <el-table-column label="入职日期" prop="hiredate" />
            <el-table-column label="员工职位" prop="job" />
            <el-table-column label="领导编号" prop="mgr" />
            <el-table-column label="薪资" prop="sal" />
            <el-table-column label="奖金" prop="comm" />
            <el-table-column align="right">
                <template #header>
                    <el-input v-model="search" size="small" placeholder="回车搜索" @keydown.enter="selece()"/>
                </template>
                <template #default="scope">
                    <el-button size="small" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
                    <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4" :page-sizes="[2, 5]" :small="small"
            :disabled="disabled" :background="background" layout="total, sizes, prev, pager, next, jumper" :total="total"
            @size-change="handleSizeChange" @current-change="handleCurrentChange" />

        <!-- 修改的对话框 -->
        <el-dialog v-model="centerDialogVisible" title="Warning" width="30%" center>
            <el-form ref="ruleFormRef" :model="editEmp" status-icon label-width="120px" class="demo-ruleForm">
                <el-form-item label="员工编号" prop="pass">
                    <el-input v-model="editEmp.empno" type="text" autocomplete="off" />
                </el-form-item>
                <el-form-item label="员工姓名" prop="pass">
                    <el-input v-model="editEmp.ename" type="text" autocomplete="off" />
                </el-form-item>
                <el-form-item label="入职日期" prop="pass">
                    <el-input v-model="editEmp.hiredate" type="text" autocomplete="off" />
                </el-form-item>
                <el-form-item label="员工职位" prop="pass">
                    <el-input v-model="editEmp.job" type="text" autocomplete="off" />
                </el-form-item>
                <el-form-item label="领导编号" prop="pass">
                    <el-input v-model="editEmp.mgr" type="text" autocomplete="off" />
                </el-form-item>
                <el-form-item label="薪资" prop="pass">
                    <el-input v-model="editEmp.sal" type="text" autocomplete="off" />
                </el-form-item>
                <el-form-item label="奖金" prop="pass">
                    <el-input v-model="editEmp.comm" type="text" autocomplete="off" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="centerDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="editEmpByID()">
                        提交
                    </el-button>
                </span>
            </template>
        </el-dialog>
        <!-- 修改结束对话框 -->



        <!-- 修改 -->
        <el-dialog v-model="addDialogVisible" title="Warning" width="30%" center>
            <el-form ref="ruleFormRef" :model="addEmp" status-icon label-width="120px" class="demo-ruleForm">
                <el-form-item label="员工编号" prop="pass">
                    <el-input v-model="addEmp.empno" type="text" autocomplete="off" />
                </el-form-item>
                <el-form-item label="员工姓名" prop="pass">
                    <el-input v-model="addEmp.ename" type="text" autocomplete="off" />
                </el-form-item>
                <el-form-item label="入职日期" prop="pass">
                    <el-input v-model="addEmp.hiredate" type="text" autocomplete="off" />
                </el-form-item>
                <el-form-item label="员工职位" prop="pass">
                    <el-input v-model="addEmp.job" type="text" autocomplete="off" />
                </el-form-item>
                <el-form-item label="领导编号" prop="pass">
                    <el-input v-model="addEmp.mgr" type="text" autocomplete="off" />
                </el-form-item>
                <el-form-item label="薪资" prop="pass">
                    <el-input v-model="addEmp.sal" type="text" autocomplete="off" />
                </el-form-item>
                <el-form-item label="奖金" prop="pass">
                    <el-input v-model="addEmp.comm" type="text" autocomplete="off" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="addDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="addEmpByID">
                        提交
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>
<script setup>
import axios from 'axios';
import { ref } from "vue";
import { ElMessage, ElMessageBox } from 'element-plus'



//
let search = ref('')








//控制添加对话框的显示和隐藏
let addDialogVisible = ref(false)
let addEmp = ref({})

//显示添加对话框的函数
let addEmpShow = function () {
    addDialogVisible.value = true;

}
//点击提交按钮，发请求
function addEmpByID() {
    addDialogVisible.value = false;
    console.log(addEmp.value);
    axios.post('http://localhost:9090/test/emp/addEmp', addEmp.value).then((res) => {
        if (res.data == 1) {
            selece();
            ElMessage({
                message: '添加成功',
                type: 'success',
            })
        } else {
            selece();
            ElMessage.error('修改失败')
        }
    }).catch((err) => {
        console.log(err);
    })
}











let emps = ref([]);//接收后端返回emp数据的！
let total = ref(0);//接收后端返回emp数据的！
//分页数据
//当前页码
let currentPage4 = ref(1)
//每页数据条数
let pageSize4 = ref(5)
//分页组件的样式
let small = ref(false)
let background = ref(false)
let disabled = ref(false)
//控制修改对话框显示
let centerDialogVisible = ref(false)
//用来记录需要修改的一条数据
let editEmp = ref({})

const handleSizeChange = function (val) {
    console.log(val)
    pageSize4.value = val;
    selece();
}
const handleCurrentChange = function (val) {
    selece();
    console.log(val)
    currentPage4.value = val;
}











//修改!
const handleEdit = function (index, row) {
    centerDialogVisible.value = true,
        console.log(index, row);
    editEmp.value = row;
}

function editEmpByID() {
    centerDialogVisible.value = false,
        //访问修改操作
        console.log(editEmp.value);
    axios.post('http://localhost:9090/test/emp/editEmp', editEmp.value).then((res) => {
        if (res.data == 1) {
            selece();
            ElMessage({
                message: '修改成功',
                type: 'success',
            })
        } else {
            selece();
            ElMessage.error('修改失败')
        }
    }).catch((err) => {
        console.log(err);
    })
}










selece();
function selece() {
    axios.get('http://localhost:9090/test/emp/emps?pageNum=' + currentPage4.value + "&pageSize=" + pageSize4.value + '&ename=' + search.value).then((res) => {
        console.log(res.data);
        emps.value = res.data.empList;
        total.value = res.data.total;
    }).catch((err) => {
        console.log(err);
    })
}
let handleDelete = function (index, row) {
    console.log(row.empno);
    ElMessageBox.confirm(
        '请确认是否删除？',
        '删除功能',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            //  点确定
            //删除代码
            axios.get('http://localhost:9090/test/emp/delete?empno=' + row.empno).then((res) => {
                console.log(res.data);
                if (res.data == 1) {
                    selece();
                    //删除成功
                    ElMessage({
                        message: '删除成功',
                        type: 'success',
                    })
                } else {
                    selece();
                    //删除失败
                    ElMessage.error('删除失败')
                }
            }).catch((err) => {
                console.log(err);
            })
            //结束删除
        })
        .catch(() => {
            //  点取消
            ElMessage({
                message: '取消成功',
                type: 'warning',
            })
        })






}
</script>